import React, { useState } from 'react';
import { OrderCard } from '../components/orders/OrderCard';
import { useTranslation } from 'react-i18next';
import type { Order, Snack } from '../types';

const MOCK_ORDERS = [
  {
    id: '1',
    snacks: [
      {
        snack: {
          id: '1',
          name: '巧克力',
          price: 5,
          image: 'https://images.unsplash.com/photo-1511381939415-e44015466834?w=400',
          stock: 10,
          description: '美味的巧克力'
        } as Snack,
        quantity: 2
      },
      {
        snack: {
          id: '2',
          name: '薯片',
          price: 3,
          image: 'https://images.unsplash.com/photo-1566478989037-eec170784d0b?w=400',
          stock: 15,
          description: '香脆的薯片'
        } as Snack,
        quantity: 1
      }
    ],
    total: 13,
    status: 'pending',
    timestamp: '2024-03-10T14:30:00Z'
  },
  {
    id: '2',
    snacks: [
      {
        snack: {
          id: '3',
          name: '饼干',
          price: 4,
          image: 'https://images.unsplash.com/photo-1499636136210-6f4ee915583e?w=400',
          stock: 20,
          description: '香甜的饼干'
        } as Snack,
        quantity: 3
      }
    ],
    total: 12,
    status: 'paid',
    timestamp: '2024-03-10T13:15:00Z'
  }
] as Order[];

export default function Orders() {
  const [orders] = useState<Order[]>(MOCK_ORDERS);
  const { t } = useTranslation();

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">{t('订单.标题')}</h1>

      <div className="space-y-4">
        {orders.map(order => (
          <OrderCard key={order.id} order={order} />
        ))}
      </div>
    </div>
  );
}